<template>
    <view class="">

        <div class="change-container">
            <div class="change-img-container">
                <div class="background-image"></div>
            </div>
            <div class="input-container">
                <div class="menu-box">
                    <div class="menu-item">
                        <input type="password" placeholder="新密码" v-model="newPassword" class="input-field"
                            :style="{ borderColor: newPasswordValid && passwordsMatch ? 'green' : 'red' }">
                    </div>
                    <div class="menu-item">
                        <input type="password" placeholder="确认密码" v-model="confirmPassword" class="input-field"
                            :style="{ borderColor: newPasswordValid && passwordsMatch ? 'green' : 'red' }">
                    </div>
                </div>
            </div>
            <div :class="isPasswordOk" v-if="newPassword.length > 0">
                <div :style="{ color: newPasswordValid ? 'green' : 'red' }">密码必须包含英文和数字，且至少8位。</div>
                <div :style="{ color: passwordsMatch ? 'green' : 'red' }">两次输入密码需保持一致。</div>
            </div>
        </div>
        <button @click="submitForm" class="confirm-btn">确认修改</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                newPassword: "",
                confirmPassword: "",
                newPasswordValid: false,
                passwordsMatch: false,
            };
        },
        computed: {
            isPasswordOk() {
                return this.newPasswordValid && this.passwordsMatch ? 'menu-tips-ok' : 'menu-tips-wrong';
            }
        },
        watch: {
            newPassword(newValue) {
                // 实时检查密码有效性
                this.newPasswordValid = this.validatePassword(newValue);
                // 实时检查两次密码是否一致
                this.passwordsMatch = this.newPassword === this.confirmPassword;
            },
            confirmPassword(newValue) {
                // 实时检查两次密码是否一致
                this.passwordsMatch = this.newPassword === newValue;
            }
        },
        mounted() {

        },
        methods: {
            validatePassword(password) {
                // 密码校验规则
                const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
                const consecutiveNumbersRegex = /(\d)\1{2}/;
                return passwordRegex.test(password) && !consecutiveNumbersRegex.test(password);
            },
            submitForm() {
                if (!this.newPasswordValid) {
                    uni.showToast({
                        title: "密码无效，请输入有效密码。",
                        icon: "none",
                    });
                    this.newPassword = "";
                    this.confirmPassword = "";
                    return;
                }
                if (!this.passwordsMatch) {
                    uni.showToast({
                        title: "两次输入密码不一致，请重新输入。",
                        icon: "none",
                    });
                    this.newPassword = "";
                    this.confirmPassword = "";
                    return;
                }
                // 发送修改密码请求
                const authorization = uni.getStorageSync('authorization') // 从本地存储中获取 authorization
                const JSESSIONID = uni.getStorageSync('JSESSIONID') // 从本地存储中获取 JSESSIONID
                // uni.request({
                //     url: `${this.globalConfig.serverUrl}/user/updatePassword`,
                //     method: 'POST',
                //     data: {
                //         oldPassword: uni.getStorageSync("password"),
                //         newPassword: this.newPassword
                //     },
                //     header: {
                //         'Authorization': authorization,
                //         'Cookie': `JSESSIONID=${JSESSIONID}`
                //     },
                //     success: (res) => {
                //         console.log(res.data);
                //         // 请求成功
                //         if (res.data.code == 200) {
                //             uni.showToast({
                //                 title: "密码修改成功",
                //                 icon: "success",
                //             });
                //             const authorization = uni.getStorageSync(
                //                 'authorization') // 从本地存储中获取 authorization
                //             const JSESSIONID = uni.getStorageSync('JSESSIONID') // 从本地存储中获取 JSESSIONID
                //             uni.request({
                //                 url: `${this.globalConfig.serverUrl}/user/logout`,
                //                 method: "POST",
                //                 header: {
                //                     'Authorization': authorization,
                //                     'Cookie': `JSESSIONID=${JSESSIONID}`
                //                 }
                //             })
                //             // 密码修改成功后，重定向到登录页面
                //             uni.reLaunch({
                //                 url: '/pages/login/login'
                //             })
                //         } else {
                //             uni.showToast({
                //                 title: res.data.message, // 根据后端返回的错误信息提示用户
                //                 icon: "none",
                //             });
                //         }
                //     },
                //     fail: (err) => {
                //         // 请求失败
                //         uni.showToast({
                //             title: "密码修改失败：" + err.errMsg, // 提示用户请求失败的原因
                //             icon: "none",
                //         });
                //     }
                // });
            },
            pageBack() {
                uni.navigateBack();
            }
        },
    };
</script>

<style>
    .change-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .change-img-container {
        width: 200rpx;
        height: 200rpx;
        margin-top: 100rpx;
        margin-bottom: 20px;
        position: relative;
    }

    .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(@/static/change-password.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .input-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .input-field {
        width: 100%;
        height: 40px;
        padding: 10px;
        /* margin-bottom: 10px; */
        border: 1px solid #d0dbea;
        border-radius: 5px;
    }

    .confirm-btn {
        width: 90vw;
        padding: 6px;
        margin-top: 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .confirm-btn:hover {
        background-color: #0056b3;
    }

    .menu-box {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 90vw;
    }

    .menu-item {
        margin-bottom: 10px;
        height: 42px;
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        border-top: 1px solid #d0dbea;
        border-bottom: 1px solid #d0dbea;
    }

    .menu-tips-wrong {
        width: 85%;
        background-color: #ffddea;
        border-radius: 0.15625rem;
        border: 1px solid #f7797b;
        padding: 10px;
    }

    .menu-tips-ok {
        width: 85%;
        background-color: #d7ffe1;
        border-radius: 0.15625rem;
        border: 1px solid #67f777;
        padding: 10px;
    }

    .menu-item-name {
        color: #3690F7;
    }

    .menu-item-arrow {
        color: #005bea;
    }

    .input-field {
        border: 0px;
    }
    
    button {
        height: 100rpx;
    }
</style>